<template>
	<div class="bgimg">
		<div class="overlay">
			<div class="overlay-content scrolling align-items row-justify-content">
				<div class="content">
					<div class="title">
						<h1>im ToKen</h1>
						<h5>你的第一个智能数字钱包</h5>
					</div>
					<div class="row-space-between flex-column">
						<router-link to="/Found" class="button row-column-center">创建钱包</router-link>
						<router-link to="/Import" class="button row-column-center">导入钱包</router-link>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	let _this;
	export default {
		name: "Login",
		components: {},
		props: {},
		data() {
			return {
				bodyHeight: "",
				userName: "",
				userPassword: "",
				loading: false
			};
		},
		beforeCreate() {
			_this = this;
		},
		watch: {
			userName: function() {
				this.userName = this.userName.replace(/[\u4e00-\u9fa5]/gi, ""); // 帐号不能输入中文
			},
			userPassword: function() {
				this.userPassword = this.userPassword.replace(/[\u4e00-\u9fa5]/gi, ""); // 密码不能输入中文
			}
		},
		computed: {},
		methods: {},
		created() {},
		mounted() {
			this.bodyHeight = document.documentElement.clientHeight;
		},
		destroyed() {},
		filters: {}
	};
</script>

<style lang="less" scoped>
	.bgimg {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100%;
		background: url("../../../assets/images/bg.png") no-repeat left top;
		background-size: cover;
	}
	
	.content {
		color: #fff;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		height: 243px;
		align-items: center;
		.title {
			height: 65px;
			text-align: center;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			h1 {
				font-weight: 200;
			}
			h5 {
				letter-spacing: 2px;
			}
		}
		div:nth-child(2) {
			height: 125px;
			.button {
				color: #fff;
				width: 250px;
				height: 50px;
				border-radius: 50px;
				background: #558aeb;
				border: none;
			}
		}
	}
</style>